<!DOCTYPE html>
<html>

<head>
    <script src="../resource/jquery.js"></script>
    <script src="../resource/jquery.validate.min.js"></script>
    <link rel="stylesheet" href="../css/ifont.css"> 
</head>

<body>
    <div id="table">
        <div class="top">
            <div class="mine">
                <i class="iconfont icon-icon-test11"></i>
                <label>我的</label>
            </div>
        </div>
        <div class="bottom">
            <div class="left">左边</div>
            <div class="right">中间</div>
        </div>
    </div>
</body>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    html,
    body {
        width: 100%;
        height: 100%;
        border: 1px yellow solid;
        overflow: hidden;
    }

    div {
        border: 1px solid red;
        width: 100%;
        height: 100%;
    }

    .top {
        width: 100%;
        height: 10%;
        display: flex;
        align-items: center;
        background-color: bisque;

    }

    .bottom {
        width: 100%;
        height: 90%;
        flex-grow: 1;
    }

    .left {
        width: 15%;
        height: 100%;
        display: inline-block;
    }

    .right {
        height: 100%;
        float: right;
    }
    .mine{
        border: black 1px solid;
        height: 60%;
        width: 10%;
        margin-left: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mine:hover{
        background-color: grey;
    }
    .mine:active{
        background-color: dimgrey;
    }
</style>
<script>
</script>
</html>